<template>
  <!-- 歌手详情组件 -->
  <div class="singer_detail">
    <div class="head">
      <span class="name">{{ singerDetail.name }}</span>
      <span class="alias" v-for="alias in singerDetail.alias" :key="alias">{{
        alias
      }}</span>
    </div>
    <div class="pic">
      <img :src="singerDetail.picUrl" alt="" class="pic_url" />
    </div>
    <SongItem @add-play-song="addPlaySong"></SongItem>
    <Page
      :total-data="totalData"
      :page-num="20"
      @change-page="changePage"
    ></Page>
  </div>
</template>

<script>
import {
  defineComponent,
  computed,
  reactive,
  onMounted,
  provide,
  ref,
  toRefs,
} from "vue";
import { useStore, mapGetters } from "vuex";
import SongItem from "@/components/songitem/SongItem.vue";
import Page from "@/components/page/Page.vue";
import { handleSingerSong } from "@/network/singer/singer.js";
export default defineComponent({
  name: "SingerDetail",
  components: {
    SongItem,
    Page,
  },
  setup() {
    const store = useStore();
    let singerDetail = computed(
      mapGetters(["getSingerListDetail"]).getSingerListDetail.bind({
        $store: store,
      })
    );
    let data = reactive({
      singerSongParam: {
        limit: 20,
        offset: 0,
        order: "hot",
        id: 0,
      },
      totalData: 0,
    });
    let songs = ref([]);

    provide("songs", songs);

    onMounted(() => {
      data.singerSongParam.id = singerDetail.value.id;
      if (data.singerSongParam.id != 0) {
        getSingerSong(data.singerSongParam);
      }
    });

    // 获取歌手歌曲请求
    let getSingerSong = async (params) => {
      let res = await handleSingerSong(params);
      songs.value = res.songs;
      data.totalData = res.total;
    };

    let changePage = (page) => {
      data.singerSongParam.offset = (page - 1) * 20;
      getSingerSong(data.singerSongParam);
    };

    // 双击播放歌曲事件
    let addPlaySong = (item) => {
      store.dispatch("addPlaySong", item);
    };

    return { ...toRefs(data), singerDetail, changePage, addPlaySong };
  },
});
</script>
<style scoped>
.singer_detail {
  width: 80%;
  margin: 0 auto;
  padding: 20px 25px;
  background-color: #fff;
}
.head {
  width: 100%;
}
.name {
  font-size: 24px;
  color: #222;
  font-weight: 600;
}
.alias {
  font-size: 16px;
  color: #666;
  padding: 0 14px;
}
.pic {
  width: 615px;
  height: 325px;
  margin: 10px 0;
}
.pic_url {
  width: 100%;
  height: 100%;
}
</style>
